<template>
	<view class="page-wrap">
		<loading v-if="isLoading"></loading>
		<navBar></navBar>
		<match-media v-if="smallScreen" :max-width="MAX_SIZEiZE - 1">
			<view class="tabbar">
				<tabBar :showselected="true" ref="tabBar"></tabBar>
			</view>
		</match-media>
		<view class="content">
			<match-media v-if="smallScreen" :max-width="MAX_SIZEiZE - 1">
				<uni-nav-bar fixed statusBar backgroundColor="var(--bg-3)" :border="false">
					<text class="page-title">{{$t('Page.Invite.yq')}}</text>
				</uni-nav-bar>
			</match-media>
			<image class="banner" :src="`/static/image/Invite/banner-${theme}.png`" mode="widthFix"></image>
			<view class="invitaion">
				<view class="invitaion-item" v-show="is_invited_on">
					<match-media :min-width="MAX_SIZEiZE">
						<view class="invitation-title">
							{{$t('Page.Invite.yqjl')}}
						</view>
					</match-media>
					<view class="card" v-show="is_invited_on">
						<view class="card-title">
							{{$t('Page.Invite.cpbt1')}} {{invited_bonus}} {{$t('Page.Invite.cpbt2')}}
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" :style="{width:scrollWidth}">
							<view class="scroll-view-item_H-wrap" style="padding-bottom: 60px;">
								<view class="scroll-view-item_H" v-for="(item,index) in +invited_maxnum" :key="index"
									:style="{opacity: (index + 1) <= sonnum ? '1' : '.5'}">
									<image v-if="(index + 1) <= sonnum" class="invite-icon"
										:src="`/static/image/Invite/complete-${theme}.png`" mode="aspectFit"></image>
									<image v-else class="invite-icon" :src="`/static/image/Invite/coin-${theme}.png`"
										mode="aspectFit"></image>
									<view class="award-money">
										R${{(index + 1) * Number(invited_bonus)}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="crad-num">
							{{sonnum}} {{$t('Page.Invite.yqrs')}}
						</view>
					</view>
				</view>
				<view class="invitaion-item" v-show="is_user_num">
					<match-media :max-width="MAX_SIZEiZE - 1">
						<view class="invitation-title" style="margin-bottom: 15px;">
							{{$t('Page.Invite.yqjl')}}
						</view>
					</match-media>
					<view class="card" v-show="is_user_num">
						<scroll-view class="scroll-view_H" scroll-x="true" :style="{width:scrollWidth,margin:'0 auto'}">
							<view class="scroll-view-item_H-wrap" style="padding-bottom: 68px;">
								<view class="scroll-view-item_H scroll-view-item_H2"
									:style="{marginRight: '38px',opacity:  item.num <= sonvalidinfo ? '1' : '0.5'}"
									v-for="(item,index) in team_num" :key="index">
									<view class="bouns">
										{{item.num}} {{$t('Page.Invite.yh')}}
									</view>
									<image class="invite-icon" style="margin: 5px;"
										:src="`/static/image/Invite/coin-${theme}.png`" mode="aspectFit"></image>
									<view class="award-money">
										R${{item.bonus}}
									</view>
									<image class="arrow" v-if="index !== (team_num.length - 1)"
										:src="`/static/image/Invite/arrow-${theme}.png`" mode="aspectFit">
									</image>
								</view>
							</view>
						</scroll-view>
						<view class="crad-num">
							{{sonvalidinfo}} {{$t('Page.Invite.yyqrs')}}
						</view>
					</view>
				</view>
				<view class="invitaion-item">
					<match-media :max-width="MAX_SIZEiZE - 1">
						<view class="invitation-title" style="margin-bottom: 15px;">
							{{$t('Page.Invite.fxlj')}}
						</view>
					</match-media>
					<view class="card">
						<view class="qr-code-wrap">
							<uqrcode ref="QrCode" :start="false" canvasId="qrcode" :value="invited_url"
								:size="qrCodeSize" :options="options">
							</uqrcode>
						</view>
						<view class="url-link">
							<uni-link :href="invited_url" :text="invited_url" color="#fff"></uni-link>
						</view>
						<waves class="copy-btn" @onTap="copyInviteUrl">
							{{$t('Page.Invite.fzlj')}}
						</waves>
					</view>
				</view>
			</view>
			<view class="invitaion">
				<view class="invitaion-item">
					<view class="invitation-title">
						{{$t('Page.Invite.tdms')}}
					</view>
					<view class="card">
						<view class="card-title card-title2" style="margin-top: 15px;">
							{{$t('Page.Invite.fxgpy')}}
						</view>
						<view class="list">
							<view class="item">
								Me
							</view>
							<view class="item">
								<image class="item-l" :src="`/static/image/Invite/arrow-right-${theme}.png`"
									mode="aspectFit"></image>
								<view class="item-r">
									<view class="item-r-level">
										{{$t('Page.Invite.zsdl')}}
									</view>
									<view class="item-r-desc">
										{{$t('Page.Invite.zjlj')}}
									</view>
								</view>
							</view>
							<view class="item">
								<image class="item-l" :src="`/static/image/Invite/arrow-right-${theme}.png`"
									mode="aspectFit"></image>
								<view class="item-r">
									<view class="item-r-level">
										{{$t('Page.Invite.ejdl')}}
									</view>
									<view class="item-r-desc">
										{{$t('Page.Invite.zslj')}}
									</view>
								</view>
							</view>
							<view class="item">
								<image class="item-l" :src="`/static/image/Invite/arrow-right-${theme}.png`"
									mode="aspectFit"></image>
								<view class="item-r">
									<view class="item-r-level">
										{{$t('Page.Invite.sjdl')}}
									</view>
									<view class="item-r-desc">
										{{$t('Page.Invite.ejlj')}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-benefit">
				<view class="list-benefit-item" v-if="is_tui_bonus">
					<view class="benefit-item-title">
						{{$t('Page.Invite.czfl')}}
					</view>
					<view class="benefit-item-cont">
						<view class="fist-paragraph">
							Convidar os usuários a se tornarem membros de sua equipe, e você receberá recompensas de
							comissão por suas recargas efetivas.
						</view>
						<view class="item-text tier">
							Nível 1: Para recharges qualificados para usuários do Nível 1, você receberá uma recompensa
							de recharge de {{rate.onerate}}%.
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$ {{getReward(rate.onerate)}}
							e
							100 usuários
							pode ganhar R$ {{getReward(rate.onerate,100)}} .
						</view>
						<view class="item-text tier">
							Nível 2: Para recargas qualificadas para usuários do Nível 1, você receberá uma recarga de
							{{rate.tworate}}% recompensa.
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$ {{getReward(rate.onerate)}}
							e
							100 usuários
							pode ganhar R$ {{getReward(rate.onerate,100)}}.
						</view>
						<view class="item-text tier">
							Nível 3: Para recargas qualificadas para usuários do Nível 1, você receberá uma recarga de
							{{rate.threerate}}%
							recompensa.
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$
							{{getReward(rate.threerate)}}
							e 100 usuários
							pode ganhar R$ {{getReward(rate.threerate,100)}}.
						</view>
						<view class="item-text tier">
							Renda total = renda direta + renda secundária + renda terciária
						</view>
					</view>
				</view>
				<view class="list-benefit-item" v-if="is_three_bonus">
					<view class="benefit-item-title">
						apostar rebate
					</view>
					<view class="benefit-item-cont">
						<view class="fist-paragraph">
							Invita os usuários a se tornarem membros de sua equipe. Amigos apostam e você será
							recompensado
							com descontos em apostas válidas.
						</view>
						<view class="item-text tier">
							Nível 1: Para recargas qualificadas para usuários do Nível 1, você receberá uma recarga de
							{{three_bonus.onerate}}%
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$
							{{getReward(three_bonus.onerate)}} e 100 usuários
							pode ganhar R$ {{getReward(three_bonus.onerate,100)}}.
						</view>
						<view class="item-text tier">
							Nível 2: Para recargas qualificadas para usuários do Nível 1, você receberá uma recarga de
							{{three_bonus.tworate}}%
							recompensa.
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$
							{{getReward(three_bonus.tworate)}} e 100 usuários
							pode ganhar R$ {{getReward(three_bonus.tworate,100)}}.
						</view>
						<view class="item-text tier">
							Nível 3: Para recargas qualificadas para usuários do Nível 1, você receberá uma recarga de
							{{three_bonus.threerate}}%
							recompensa.
						</view>
						<view class="item-text example">
							Exemplo: 1 usuário recharge R$ 1000 por dia, e a recompensa é R$
							{{getReward(three_bonus.threerate)}} e 100 usuários
							pode ganhar R$ {{getReward(three_bonus.threerate,100)}}.
						</view>
						<view class="item-text tier">
							Renda total = renda direta + renda secundária + renda terciária
						</view>
					</view>
				</view>
				<view class="list-benefit-item">
					<view class="benefit-item-title">
						Descrição de recompensa
					</view>
					<view class="benefit-item-cont">
						<view class="item-text tier">
							1. O que é uma subordinada?
						</view>
						<view class="item-text example">
							Na página de compartilhamento, compartilhem seu link de compartilhamento com seus amigos,
							deixem seus amigos se tornarem seus subordinados, e as pessoas recomendadas por seus amigos
							podem
							também se tornam seus subordinados, e promover mais usuários irá trazer mais comissões.
						</view>
						<view class="item-text tier">
							2. Como verificar quantos seus subordinados trouxeram?
						</view>
						<view class="item-text example">
							Você pode clicar em "My Team"
							"Minha" página para ver suas subordinadas, ou clicar no botão de atalho embaixo para ver sua
							equipe.
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>
<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				MAX_SIZEiZE,
				options: {
					margin: 8
				},
				BETTING: 1000, //投注值
				rate: {},
				invited_bonus: '', //邀请奖励
				invited_maxnum: '', //最大邀请人数
				soninfo: [], //下级信息
				sonnum: 0, //邀请人数
				invited_url: '', //邀请链接  
				is_invited_on: true, // 邀请奖励开关（1开启，0关闭） 
				is_user_num: true, // 邀请达成奖励开关（1开启，0关闭） 
				is_tui_bonus: true, //下级充值奖励开关（1开启， 0关闭）
				is_three_bonus: true, //下级投注奖励开关（1开启， 0关闭）
				team_num: [],
				three_bonus: {},
				sonvalidinfo: 0
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				leftWindowStyle: state => state.app.leftWindowStyle,
				windowSize: state => state.app.windowSize,
			}),
			...mapGetters('app', ['isLogin', 'bigScreen', 'smallScreen']),
			scrollWidth() {
				if (this.windowSize.windowWidth >= 768) {
					return `calc(100vw - ${this.leftWindowStyle.width} - 120px)`
				} else if (this.windowSize.windowWidth > 1024) {
					return `calc(100vw - 120px)`
				}
			},
			visualNum() {
				if (this.sonnum == 0) {
					return 5
				} else {
					return this.sonnum
				}
			},
			qrCodeSize() {
				if (this.windowSize.windowWidth < 768) {
					return 90
				} else if (this.windowSize.windowWidth >= 768) {
					return 184
				}
			}
		},
		onShow() {
			this.getInviteInfo()
		},
		mounted() {
			this.$refs.QrCode.make()
		},
		methods: {
			...mapMutations('app', ['setLeftPageWidth']),
			getReward(rate, number = 1, base = 1000) {
				if (rate && number) {
					return base * (parseFloat(rate) / 100) * number
				}
			},
			// 获取邀请推广信息
			getInviteInfo() {
				this.isLoading = true
				const {
					INVITED
				} = this.$api
				sendMessage({
					flag: INVITED,
				})
				uni.$once(INVITED, (res) => {
					this.isLoading = false
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.rate = res.data.invited_back_rate
						this.invited_bonus = res.data.invited_bonus
						this.invited_maxnum = +res.data.invited_maxnum //将字符串转换成数组
						this.sonnum = res.data.sonnum
						this.invited_url = res.data.invited_url
						this.is_invited_on = +res.data.is_invited_on
						this.is_user_num = +res.data.is_user_num
						this.is_tui_bonus = +res.data.is_tui_bonus
						this.is_three_bonus = +res.data.is_three_bonus
						this.team_num = res.data.team_num
						this.three_bonus = res.data.three_bonus
						this.sonvalidinfo = res.data.sonvalidinfo
					}
				})
			},

			// 复制推广链接
			copyInviteUrl() {
				uni.setClipboardData({
					data: this.invited_url,
					success: () => {
						uni.showToast({ //提示
							title: this.$t('Page.component.fzcg'),
							icon: 'none'
						})
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 默认样式 结构 
	.page-wrap {
		background: var(--bg-35);
		min-height: 100vh;

		.content {
			width: 100%;
			min-height: calc(100vh - 50px);
			background: var(--bg-35);
			padding: 0 15px 65px; //下边距 tabBar高度 50 + 15 
			box-sizing: border-box;

			.page-title {
				width: 100%;
				margin: auto;
				height: 44px;
				line-height: 44px;
				font-size: 20px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}

			.banner {
				width: 100%;
				max-height: 180px;
				border-radius: 15px;
			}


			.invitaion {
				width: 100%;
				margin-top: 15px;
				box-sizing: border-box;

				.invitaion-item {
					margin-top: 15px;
					border-radius: 15px;
					background: rgba(204, 181, 155, 0.1);
					padding: 15px;
					box-sizing: border-box;

					.invitation-title {
						background: var(--bg-image-2) no-repeat;
						height: 35px;
						line-height: 35px;
						text-align: center;
						background-size: 100% 100%;
						margin: 0 auto;
						width: fit-content;
						min-width: 213px;
						padding: 0 30px;
						font-size: 16px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.card {
						width: 100%;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						position: relative;

						.card-title {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 13px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: var(--color-14);
							margin-bottom: 15px;
							text-align: center
						}

						.card-title2 {
							justify-content: flex-start;
							font-size: 14px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							line-height: 1.2;
							text-align: left;
							color: var(--color-14);
						}

						.scroll-view_H {
							white-space: nowrap;
							margin: 0 auto;

							.scroll-view-item_H-wrap {
								padding-bottom: 50px;

								.scroll-view-item_H {
									background: var(--bg-34);
									display: inline-block;
									border-radius: 10px;
									color: #fff;
									text-align: center;
									font-size: 13px;
									margin-right: 20px;
									padding: 5px;
									box-sizing: border-box;
									position: relative;

									&:last-child {
										margin-right: 0;
									}

									.invite-icon {
										width: 30px;
										height: 30px;
									}

									.award-money {
										font-size: 11px;
										font-family: PingFang SC-Bold, PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
									}
								}

								.scroll-view-item_H2 {


									.bouns {
										font-size: 8px;
										font-family: PingFang SC-Medium, PingFang SC;
										font-weight: 500;
										color: #FFFFFF;
									}
								}

								.arrow {
									width: 28px;
									height: 16px;
									position: absolute;
									bottom: 50%;
									right: -33px;
									transform: translateY(50%);
								}
							}
						}

						.qr-code-wrap {
							margin: 0 auto;
						}

						.url-link {
							margin: 10px auto;
							text-align: center;
							word-wrap: wrap;
							font-size: 12px;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 22px;
						}

						.copy-btn {
							width: 120px;
							height: 30px;
							line-height: 32px;
							text-align: center;
							background: var(--bg-13);
							box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
							color: var(--color-28);
							border-radius: 100px;
							margin: 0 auto;
							font-size: 13px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
						}

						.list {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.item {
								width: 100%;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
								background: var(--bg-37);
								border-radius: 0;
								padding: 10px !important;
								margin-bottom: 10px;
								box-sizing: border-box;

								&:last-child {
									margin-right: 0;
								}

								.item-l {
									width: 25px;
									height: 30px;
									margin-right: 10px;
									transform: rotate(90deg);
								}

								.item-r {
									display: flex;
									flex-direction: column;

									.item-r-level {
										font-size: 14px;
										font-family: PingFang SC-Bold, PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
									}

									.item-r-desc {
										font-size: 12px;
										font-family: PingFang SC-Medium, PingFang SC;
										font-weight: 500;
										color: var(--color-29);
										line-height: 17px;
									}

								}
							}
						}

						/* 水平滚动条样式 */
						::-webkit-scrollbar {
							width: 10px;
							/* 滚动条宽度 */
							height: 10px;
							/* 滚动条高度 */
							transform: translateY(30px);
						}

						::-webkit-scrollbar-track {
							background-color: var(--bg-34);
							/* 滚动条背景颜色 */
						}

						::-webkit-scrollbar-thumb {
							background-color: var(--bg-6);
							/* 滚动条滑块颜色 */
							border-radius: 5px;
							/* 滚动条滑块圆角 */
							cursor: pointer;
						}

						::-webkit-scrollbar-thumb:hover {
							opacity: .65;
							cursor: pointer !important;
							/* 鼠标悬停时滚动条滑块颜色 */
						}

						.crad-num {
							position: absolute;
							left: 50%;
							bottom: 10%;
							transform: translateX(-50%);
							width: 230px;
							height: 30px;
							line-height: 30px;
							text-align: center;
							color: var(--color-13);
							background: var(--bg-36);
							border-radius: 15px;
						}
					}

				}
			}

			.list-benefit {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 15px;
				box-sizing: border-box;

				.list-benefit-item {
					width: 100%;
					margin-bottom: 15px;
					color: #fff;
					display: flex;
					flex-direction: column;
					padding: 15px;
					box-sizing: border-box;
					border-radius: 15px;
					background: var(--bg-9);

					&:last-child {
						margin-bottom: 0;
					}

					.benefit-item-title {
						background: var(--bg-image-2) no-repeat;
						height: 35px;
						line-height: 35px;
						text-align: center;
						background-size: 100% 100%;
						margin: 0 auto 15px;
						min-width: 213px;
						padding: 0 30px;
						font-size: 16px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.benefit-item-cont {

						.fist-paragraph {
							font-size: 14px;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
						}

						.item-text {
							font-size: 13px;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							position: relative;
							padding-left: 15px;
							box-sizing: border;

							&:before {
								content: '';
								width: 5px;
								height: 5px;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								left: 0px;
								top: 10px;
							}
						}

						.tier {
							color: rgba(255, 255, 255, .9);
							margin-top: 10px;
						}

						.example {
							color: #9A8981;
						}
					}
				}
			}
		}
	}

	// PC
	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;
			box-sizing: border-box;

			.content {
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 30px;
				background: var(--bg-35);
				box-sizing: border-box;

				.banner {
					width: 100%;
					height: 300px;
					max-height: 300px !important;
					border-radius: 20px;
				}

				.invitaion {
					width: 100%;
					margin-top: 30px;
					background: var(--bg-19);
					border-radius: 20px;
					box-sizing: border-box;

					.invitaion-item {
						margin-top: 15px;
						border-radius: 15px;
						background: transparent;
						padding: 15px;
						box-sizing: border-box;

						.invitation-title {
							background: var(--bg-image-2) no-repeat;
							height: 35px;
							line-height: 35px;
							text-align: center;
							background-size: 100% 100%;
							margin: 0 auto;
							min-width: 213px;
							padding: 0 30px;
							font-size: 16px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
						}

						.card {
							width: 100%;
							display: flex;
							flex-direction: column;
							overflow: hidden;
							position: relative;

							.card-title {
								margin: 20px 0 15px;
							}

							.card-title2 {
								justify-content: center;
							}

							.scroll-view_H {
								white-space: nowrap;
								margin: 0 auto;

								.scroll-view-item_H-wrap {
									padding-bottom: 70px;

									.scroll-view-item_H {
										display: inline-block;
										background: var(--bg-34);
										border-radius: 10px;
										color: #fff;
										text-align: center;
										font-size: 36rpx;
										margin-right: 20px;
										padding: 15px;
										box-sizing: border-box;

										&:last-child {
											margin-right: 0;
										}
									}

									.scroll-view-item_H2 {
										.bouns {
											font-size: 8px;
											font-family: PingFang SC-Medium, PingFang SC;
											font-weight: 500;
											color: #FFFFFF;
										}
									}
								}
							}

							.list {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.item {
									flex: 1;
									color: #fff;
									display: flex;
									align-items: center;
									justify-content: center;
									margin-right: 15px;
									min-height: 86px;
									background: var(--bg-37);
									border-radius: 10px;
									padding: 15px;
									box-sizing: border-box;

									&:first-child {
										font-size: 30px;
										font-family: PingFang SC-Bold, PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
									}

									&:last-child {
										margin-right: 0;
									}

									.item-l {
										width: 25px;
										height: 30px;
										transform: rotate(0deg);
									}
								}
							}

							.url-link {
								font-size: 16px;
							}


							/* 水平滚动条样式 */
							::-webkit-scrollbar {
								width: 10px;
								/* 滚动条宽度 */
								height: 10px;
								/* 滚动条高度 */
								transform: translateY(30px);
							}

							::-webkit-scrollbar-track {
								background-color: var(--bg-34);
								border-radius: 5px !important;
								overflow: hidden !important;
								/* 滚动条背景颜色 */
							}

							::-webkit-scrollbar-thumb {
								background-color: var(--bg-6);
								/* 滚动条滑块颜色 */
								border-radius: 5px;
								/* 滚动条滑块圆角 */
								cursor: pointer;
								overflow: hidden !important;
							}

							::-webkit-scrollbar-thumb:hover {
								opacity: .65;
								cursor: pointer !important;
								/* 鼠标悬停时滚动条滑块颜色 */
							}

							.crad-num {
								position: absolute;
								left: 50%;
								bottom: 11%;
								transform: translateX(-50%);
								width: 230px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								color: var(--color-13);
								background: var(--bg-36);
								border-radius: 15px;
							}
						}
					}
				}

				.list-benefit {
					flex-direction: row;
					justify-content: center;
					align-items: flex-start;
					padding: 15px 0 0;

					.list-benefit-item {
						margin-right: 43px;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	// .content /deep/ .uni-navbar__content {
	// 	z-index: 999 !important;
	// }
</style>